<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>涨幅</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/set.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css"/>
    <style>
        body {
            width: 100%;
            height: auto;
            overflow: hidden;
            background-color: #f7f7f7;
        }

        body,
        html {
            overflow-x: hidden;
        }

        .content {
            background-color: #FFFFFF;
        }

        div#tab {
            width: 100%;
        }

        .aui-bar-nav,
        .aui-btn {
            color: #FFFFFF;
            background-color: initial;
        }

        .aui-bar-nav .aui-btn .aui-iconfont {
            font-size: 0.9rem;
            line-height: 1.25rem;
            padding: 0;
            margin: 0;
            color: #ffffff;
            position: absolute;
            top: 22px;
            right: 60px;
        }

        .nav_swiper .aui-tab-item {
            color: #8BC1FC;
        }

        .aui-tab-item.aui-active {
            font-size: 0.85rem;
            color: #FFFFFF;
            border-bottom: none;
        }

        .down_relese img {
            max-width: 20px;
            padding-bottom: 12px;
            display: block;
            position: relative;
            bottom: 0px;
            transform: translate(50% 50%);
            margin: 0 auto;
        }

        .aui-tab-item {
            color: #999999;
        }

        .zhangfu_swiper {
            width: 95%;
            height: auto;
            min-height: 24rem;
            background-color: #FFFFFF;
        }

        .zhangfu_swiper .aui-tab-item .slide-title {
            width: 100%;
            border-bottom: 1px solid #E6E6E6;
        }

        .zhangfu_swiper .aui-tab-item li {
            width: 100%;
            height: 3rem;
            /*line-height: 66px;*/
            color: #000000;
            border-bottom: 1px solid #E6E6E6;
            position: relative;
        }

        .bz-nameul .bz-nameli span,
        .jg-nameul .jg-nameli span,
        .zf-nameul .zf-nameli span {
            display: block;
            height: 1rem;
            color: #000000;
            height: 0.8rem;
            top: 12px;
            border-radius: 50%;
            /*line-height: 23px;*/
        }

        .bz-nameul .bz-nameli {
            width: 22%;
            position: relative;
            margin: 0 auto;
            padding-top: 0.35rem;
        }

        .bz-name-img {
            width: 1.25rem;
            height: 1.25rem;
            margin: 0 auto;
            margin-top: 0.25rem;
        }

        .sz-name,
        .sz-nameul {
            width: 112px !important;
        }

        .sz-nameli {
            line-height: 3rem;
        }

        span.jg-zhishu {
            color: #999999 !important;
        }

        span.zf-huilv {
            color: #999999 !important;
        }

        .zf-nameli {
            overflow: hidden;
        }

        .bz-name-title {
            font-size: 0.6rem;
            line-height: 1.2rem;
        }
    </style>
</head>

<body>

<!--列表信息 Start-->
<div class="content">
    <section class="aui-refresh-content">
        <div class="aui-content">
            <ul id="dem">

                <!--市值 Tab Block-->
                <div class="swiper-container zhangfu_swiper">
                    <div class="swiper-wrapper" id="">

                        <div class="aui-tab-item" style="width: 110px;">
                            <div class="slide-title">币种</div>
                            <ul class="bz-nameul" id="bzul">
                                <!--<li class="bz-nameli">-->
                                <!--<span class="bz-name-img"></span>-->
                                <!--<span class="bz-name-title">BTC</span>-->
                                <!--</li>-->

                            </ul>
                        </div>

                        <div class="aui-tab-item" style="width:236px;">
                            <div class="slide-title">价格</div>
                            <ul class="jg-nameul" id="jgul">
                                <!--<li class="jg-nameli">-->
                                <!--<span class="jg-huilv"><b>￥</b>31900.00</span>-->
                                <!--<span class="jg-zhishu" style="color: #999999;">市值$1,502,650,000</span>-->
                                <!--</li>-->

                            </ul>
                        </div>
                        <div class="swiper-slide aui-tab-item" style="width: 110px !important;">
                            <div class="slide-title sz-name">涨幅</div>
                            <ul class="zf-nameul" id="zful">
                                <!--<li class="zf-nameli">-->
                                <!--<span class="zf-zhishu" style="color: #e61303;">+15%</span>-->
                                <!--<span class="zf-huilv"><b>￥</b>319.00</span>-->

                                <!--</li>-->

                            </ul>
                        </div>
                    </div>
                    <div style="height: 2.5rem; text-align: center;line-height: 2.5rem;color: #ccc;" id="tishi">正在加载中
                    </div>
                    <div style="height: 2.5rem;"></div>
                </div>

            </ul>
        </div>
    </section>

</div>
<!--列表信息 end-->

</body>
<script src="../../jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/aui-pull-refresh.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/tool.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  var dataList = []

  var offset = 1;

  var mindex = 0;

  var isGetOver = true;

  //
  var swiper = new Swiper('.zhangfu_swiper', {
    slidesPerView: 3,
    spaceBetween: 0,
    freeMode: true,
    pagination: {
      clickable: true,
    },
  });

  var pullRefresh = new auiPullToRefresh({
    container: document.querySelector('.aui-refresh-content'),
    triggerDistance: 100
  }, function (ret) {
    if (ret.status == "success") {
      setTimeout(function () {
        $('#bzul').html('');
        $('#jgul').html('');
        $('#zful').html('');
        dataList.length = 0
        offset = 1;
        mindex = 0;
        ajax_fordata();
        pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
      }, 1500)
    } else {
      var html = '<span>没有更多</span>'
    }
  })


  //上拉加载更多
  $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var clientHeight = $(this).height();
    if (scrollTop + clientHeight == scrollHeight) {
      offset++;
      ajax_fordata();
    }
  });

  $(function () {
    ajax_fordata();
  });


  function ajax_fordata() {

    var si = setInterval(function () {
      if (window.parent.headers != {}) {
        clearInterval(si)
        if (isGetOver) {
          $.ajax({
            url: orginlink + "/allcoin/getMarketCap?type=" + window.parent.type + "&offset=" + offset + "&limit=10",
            type: 'GET',
            headers: window.parent.headers,
            contentType: "application/json",
            dataType: 'json',
            success: function (result) {
              if(result.code == 0){
                addBox(result);
                console.log(JSON.stringify(result))
                for (let i of result.result) {
                  dataList.push(i)
                }
                localStorage.setItem("dataList", JSON.stringify(dataList))
              }
            }
          });
        }
      }
    }, 100)
  }

  function addBox(result) {
    if (result.result.length == 0) {

      $('#tishi').text("已没有更多")
      isGetOver = false;

    } else {

      $('#tishi').text("正在加载中")


      $.each(result.result, function (index, obj) {
        var jysName = obj['symbol'];
        var jysPriceNew = obj['priceCNY'];
        jysPriceNew = jysPriceNew + "";
        var jysPriceRng = obj['percentChange'];
        var imgurl = obj['urlImg'];
        //判断exchangeId进行对应

        jysPriceRng = (parseFloat(jysPriceRng).toFixed(3) * 100) / 100;
        //最新价左至右取9位
        if (jysPriceNew > 0.0000001) {
          jysPriceNew = jysPriceNew.substring(0, 9);
        }

        //涨幅 百分小数取一位预处理
//            jysPriceRng = changeTwoDecimal_f(jysPriceRng * 100);
        //数值前添加符号表示涨+跌-
        if (jysPriceRng > 0) {
          jysPriceRng = '+' + jysPriceRng;
        }

        $('#bzul').append('<li class="bz-nameli" onclick="todetail(' + (index + mindex) + ')">' + '<img src="' + imgurl + '" class="bz-name-img"/><span class="bz-name-title">' + jysName + '</span>' +
          '</li>');
        $('#jgul').append('<li class="jg-nameli" onclick="todetail(' + (index + mindex) + ')">' + '<span class="jg-huilv">￥' + jysPriceNew + '</span>' + '<span class="jg-zhishu">市值：$' + obj['marketValue'] + '</span>' +
          '</li>');
        $('#zful').append('<li class="zf-nameli" onclick="todetail(' + (index + mindex) + ')">' + '<span class="zf-zhishu">' + jysPriceRng + '%</span>' + '<span class="zf-huilv">￥' + obj['changemoney'] + '</span>' +
          '</li>');
        //数值判断涨跌后添加颜色

        if (jysPriceRng > 0) {
          $('.zf-zhishu:eq(' + (index + mindex) + ')').css('color', getRiseColor());
        } else if (jysPriceRng < 0) {
          $('.zf-zhishu:eq(' + (index + mindex) + ')').css('color', getFallColor());
        } else {
          $('.zf-zhishu:eq(' + (index + mindex) + ')').css('color', '#000000');
        }
      })

      mindex += result.result.length

    }
  }
</script>

</html>
